<template>
  <div class="singer">
      <div class="div">
          <h1>歌手推荐</h1>
      <ul>
          <li v-for="(item, index) in list" :key="index" @click="send(item)">{{item}}</li>
      </ul>
      </div>
      
      <div class="singer-bottom">
        <ul>
            <li v-for="(item,index) in singer.singerlist" :key="index">
                <img :src="item.singer_pic" alt="" @click='singerid(item.singer_mid)'>
                <p>{{item.singer_name}}</p>
          
            </li>
        </ul>
      </div>

  </div>
</template>

<script>
import {getsingers} from '../../api/index'
export default {
    data(){
        return {
            list:['华语','欧美','日韩','组合','更多>'],
            singer:[]
        }
    },
    methods:{
        send(i){
            if(i=='更多>'){
                this.$router.push({
                    path:'/singerlist'
                })
            }
        },
        //跳转歌手详情
        singerid(i){
            console.log(i);
            this.$router.push({
                path:'/singerid',
                query:{
                    sin:i
                }
            })
            
        },
        //歌手 api
        getsinger(){
            this.axios.get(getsingers).then(res=>{
                // console.log(res.data.singerList.data);
                this.singer=res.data.singerList.data
            }).catch(err=>{
                console.log(err);
            })
        }
    },
    created(){
        this. getsinger()
    }
}
</script>
<style lang="scss" scoped>
.singer{
    width: 1400px;
    margin: 0 auto;
    .div{
        display: flex;
        margin-top: 100px;
        ul{
            // margin-left: 20px;
            display:flex;
            margin-top: 10px;
            font-size: 18px;
            li{
                cursor: pointer;
                margin-left: 20px;
            }
        }
    }
    .singer-bottom{
        height: 300px;
         margin-bottom: 180px;
        
        ul{
            display: flex;
           margin-top: 20px;
           height: 380px;
            //  white-space: nowrap;
            flex: 2;
            flex-wrap: wrap;
             overflow: hidden;
            li{
               
                cursor: pointer;
                margin-left: 25px;
                margin-bottom: 20px;
               
                p{
                    text-align: center;
                }
                img{
                    //  box-shadow: 0 0 1px 1px;
                    border-radius: 50%;
                }
            }
        }
    }
}
</style>